<template>
  <div class="label-container">
    <div class="header-title-wrap">
      <span class="title">标签分析</span>
      <span class="dec">开启标签分析后，可通过能链大数据提供的用户画像分层能力对油站用户进行标签分析</span>
    </div>
    <div class="img-wrap">
      <img v-show="!isLoading" class="core-img" :src="imgSrc" alt="">
      <img v-show="isLoading" class="core-img" :src="imgAnimation" alt="">
      <transition v-for="item in desList" :key="item.class" :name="item.name">
        <div v-show="isShowPop" class="tip-img" :class="item.class">{{item.des}}</div>
      </transition>
    </div>
    <el-button v-if="imgSrc !== imgAnimation" @click="switchImg" class="btn" type="primary">开启标签分析</el-button>
    <div v-else class="des">正在进行AI智能检测</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isLoading: false,
      desList: [
        {
          class: 'left-top',
          name: 'fade1',
          des: '7天以上未进行消费的用户'
        },
        {
          class: 'left-bottom',
          name: 'fade2',
          des: '30天内平均消费低于150元的用户'
        },
        {
          class: 'right-top',
          name: 'fade3',
          des: '15天内加油频次高于2次的用户'
        },
        {
          class: 'right-bottom',
          name: 'fade4',
          des: '30天内平均消费金额高于150元的用户'
        }
      ],
      isShowPop: false,
      imgSrc: 'https://web.newlink.com/ty/merchant/vipPool/tag-animation-static.png',
      imgAnimation: 'https://web.newlink.com/ty/merchant/vipPool/tag-animation.gif'
    }
  },
  methods: {
    switchImg () {
      this.isLoading = true
      // this.imgSrc = this.imgAnimation
      setTimeout(() => {
        this.isShowPop = true
      }, 1000)
      setTimeout(() => {
        this.$router.replace( { name: 'Intelligent' } )
      }, 5000)
    }
  }
}
</script>
<style lang="less" scoped>
.label-container{
  height: 560px;
  margin: 20px 10px 0 10px;
  background-color: #fff;
  padding: 23px 41px 54px 41px;
  box-sizing: border-box;
  position: relative;
  .header-title-wrap{
    font-family: PingFangSC-Medium, PingFang SC;
    display: flex;
    align-items: center;
    .title{
      font-size: 24px;
      font-weight: 500;
      color: #000000;
      margin-right: 10px;
    }
    .dec{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .img-wrap{
    position: absolute;
    top: 107px;
    left: 50%;
    transform: translateX(-50%);
    width: 375px;
    height: 332px;
    .core-img{
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
      .tip-img{
        position: absolute;
        padding: 10px 20px;
        box-sizing: border-box;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4376FF;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .left-top{
        top: 50px;
        left: -135px;
        background-image: url('https://web.newlink.com/ty/merchant/vipPool/left-top.png');
      }
      .left-bottom{
        bottom: 37px;
        left: -174px;
        background-image: url('https://web.newlink.com/ty/merchant/vipPool/left-bottom.png');
      }
      .right-top{
        top: 42px;
        right: -174px;
        background-image: url('https://web.newlink.com/ty/merchant/vipPool/right-top.png');
      }
      .right-bottom{
        bottom: 35px;
        right: -245px;
        background-image: url('https://web.newlink.com/ty/merchant/vipPool/right-bottom.png');
      }
    }
  .btn{
    width: 180px;
    height: 48px;
    background: #4B7EFE;
    border-radius: 2px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    border-color: #4B7EFE;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
  .des{
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.fade1-enter-active,
.fade1-leave-active {
  opacity: 1;
  transform: scale(1);
  top: 50px;
  left: -135px;
  transition: all 1s ease
}
.fade1-enter, .fade1-leave-to{
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: scale(0);
  transform-origin: right bottom;
}

.fade2-enter-active,
.fade2-leave-active {
  opacity: 1;
  transform: scale(1);
  bottom: 37px;
  left: -174px;
  transition: all 1s ease
}
.fade2-enter, .fade2-leave-to{
  bottom: 50%;
  left: 50%;
  opacity: 0;
  transform: scale(0);
  transform-origin: right top;
}
.fade3-enter-active,
.fade3-leave-active {
  opacity: 1;
  transform: scale(1);
  top: 42px;
  right: -174px;
  transition: all 1s ease
}
.fade3-enter, .fade3-leave-to{
  right: 50%;
  top: 50%;
  opacity: 0;
  transform: scale(0);
  transform-origin: left bottom;
}
.fade4-enter-active,
.fade4-leave-active {
  opacity: 1;
  transform: scale(1);
  bottom: 35px;
  right: -245px;
  transition: all 1s ease
}
.fade4-enter, .fade4-leave-to{
  bottom: 50%;
  right: 50%;
  opacity: 0;
  transform: scale(0);
  transform-origin: left top;
}
</style>